<template>
  <div class="app-container">
    <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="120px" class="demo-ruleForm dict-form">
      <span>基本信息</span>
      <el-divider />

      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="资源名称" prop="title">
              <el-input v-model="formData.title" placeholder="请输入资源名称" />
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="资源权限" prop="permissionCode">
              <el-select v-model="formData.permissionCode" placeholder="请选择权限" filterable>
                <el-option-group
                  v-for="(value,key) in permissions"
                  :key="key"
                  :label="key">
                  <el-option
                    v-for="item in value"
                    :key="item.permissionCode"
                    :label="item.permissionName"
                    :value="item.permissionCode">
                  </el-option>
                </el-option-group>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="上级菜单" prop="parentId">
              <el-select v-model="formData.parentId" placeholder="请选择上级菜单" filterable>
                <el-option
                  v-for="item in resource"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="资源类型" prop="permissionCode">
              <el-select v-model="formData.resourceType" placeholder="请选择类型" filterable>
                <el-option
                  v-for="item in resourceType"
                  :key="item.itemKey"
                  :label="item.itemValue"
                  :value="item.itemKey"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <span>vue组件信息</span>
      <el-divider />

      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="组件名称" prop="name">
              <el-input v-model="formData.name" placeholder="请输入组件名称" />
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="vue组件" prop="component">
              <el-input v-model="formData.component" placeholder="请输入vue组件" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="访问路径" prop="path">
              <el-input v-model="formData.path" placeholder="请输入访问路径" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="重定向" prop="redirect">
              <el-input v-model="formData.redirect" placeholder="请输入重定向路径" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="一直显示跟路由" prop="alwaysShow">
              <el-select v-model="formData.alwaysShow">
                <el-option
                  v-for="item in generalJudgements"
                  :key="item.itemKey"
                  :label="item.itemValue"
                  :value="item.itemKey"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="在面包屑显示" prop="breadcrumb">
              <el-select v-model="formData.breadcrumb">
                <el-option
                  v-for="item in generalJudgements"
                  :key="item.itemKey"
                  :label="item.itemValue"
                  :value="item.itemKey"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="是否无缓存" prop="sort">
              <el-select v-model="formData.noCache">
                <el-option
                  v-for="item in generalJudgements"
                  :key="item.itemKey"
                  :label="item.itemValue"
                  :value="item.itemKey"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="是否隐藏" prop="hidden">
              <el-select v-model="formData.hidden">
                <el-option
                  v-for="item in generalJudgements"
                  :key="item.itemKey"
                  :label="item.itemValue"
                  :value="item.itemKey"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="图标" prop="icon">
              <el-input v-model="formData.icon" placeholder="请输入图标名称" label="资源排序" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content bg-purple">
            <el-form-item label="资源排序" prop="sort">
              <el-input-number v-model="formData.sort" :min="0" :max="1000" label="资源排序" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-bottom: 30px;">
        <el-col :span="16">
          <div class="grid-content bg-purple">
            <el-form-item label="外链" prop="url">
              <el-input v-model="formData.url" placeholder="请输入外链" label="外链" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <span>备注</span>
      <el-divider />

      <el-row :gutter="20" style="margin-bottom: 30px;">
        <el-col :span="16">
          <div class="grid-content bg-purple">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="formData.remark" type="textarea" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-form-item style="text-align: center;">
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <el-button @click="$router.back(-1)">返回</el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import {getAllResource, save} from '@/api/sys/auth/resource/index'
  import {getAllPermission} from '@/api/sys/auth/permission/index'
  import {getPermission} from '@/api/sys/auth/role/index'
  import {getItemByDictKey} from '@/api/sys/dict/item/index'

  export default {
  data() {
    return {
      formData: {
        title: '',
        permissionCode: '',
        name: '',
        path: '',
        component: '',
        hidden: '0',
        noCache: '1',
        redirect: '',
        alwaysShow: '0',
        breadcrumb: '0',
        url: '',
        sort: '',
        icon: '',
        groupName: '',
        parentId: '',
        remark: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入资源名称', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 100 个字符', trigger: 'blur' }
        ],
        name: [
          { required: false, message: '请输入组件名称', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 100 个字符', trigger: 'blur' }
        ],
        permissionCode: [
          { required: true, message: '请输入资源权限', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ],
        path: [
          { required: false, message: '请输入组件路径', trigger: 'blur' },
          { min: 3, max: 150, message: '长度在 3 到 150 个字符', trigger: 'blur' }
        ],
        component: [
          { required: false, message: '请输入VUE组件', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 300 个字符', trigger: 'blur' }
        ],
        groupName: [
          { required: true, message: '请输入分组名称', trigger: 'blur' }
        ],
        sort: [
          { required: false, message: '请输入资源排序', trigger: 'blur' }
        ],
        icon: [
          { required: false, message: '请输入资源图标', trigger: 'blur' }
        ],
        parentId: [
          { required: true, message: '请选择上级资源', trigger: 'blur' }
        ],
        remark: [
          { required: false, message: '请填输入资源备注', trigger: 'blur' }
        ]
      },
      permissions: [],
      resource: [],
      generalJudgements: [],
      resourceType: []
    }
  },
  created() {
    this.getAllPermission()
    this.getAllResource()
    this.getGeneralJudgements('generalJudgement')
    this.getResouceType('resourceType')
    if (this.$route.query.parentId !== null) {
      this.formData.parentId = this.$route.query.parentId
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          save(this.formData).then(() => {
            this.loading = false
            this.$router.push({ name: 'resource_mgr_list' })
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    getAllPermission() {
      getPermission().then(res => {
        this.permissions = res.data
      })
    },
    getAllResource() {
      getAllResource().then(res => {
        this.resource.push({
          id: 0,
          title: '顶级资源'
        })
        if(res.data){
          this.resource = this.resource.concat(res.data)
        }
      })
    },
    getGeneralJudgements(dictKey) {
      getItemByDictKey(dictKey).then(res => {
        this.generalJudgements = res.data
      })
    },
    getResouceType(dictKey) {
      getItemByDictKey(dictKey).then(res => {
        this.resourceType = res.data
      })
    }
  }
}
</script>

<style scoped>
  .dict-form{
    padding-top: 30px;
    padding-right: 30px;
  }
</style>
